import {FC, memo, ReactNode, useEffect, useState} from "react";
import { mvTypes } from "@/data/mv-types";
import { Flex, VStack } from "@chakra-ui/react";
import TextButton from "@/components/TextButton";
import { getMvs } from "@/services/modules/mvs";
import { fetchRecommendMvs } from "@/store/modules/recommend";
import { useAppDispatch, useAppSelector } from "@/hooks";
import AlbumItem from "../rangking/c-cpns/sider/AlbumItem";
import SongsAlbums from "@/components/songs-albums";
interface IProps {
    children?:ReactNode
}
const Mv :FC<IProps>  = () =>{
    const [activeIndex,setActiveIndex] = useState(0)
    const {mvs} = useAppSelector(state=>state.recommend)
 
    const onChangeActiveIndex = (index:number) => {
        setActiveIndex(index)
    }
    const onHandleClick = (id: number) => {
    };
    return (
        <Flex flexDirection="column">
            <Flex mt={4}  >
                {mvTypes.map((item,index)=>{                
                    return (
                        <TextButton key={index} text={item.name} onClick={()=>onChangeActiveIndex(index)}
                        isActive={activeIndex === index} />
                    
                    )
                })}     
            </Flex>     
            { mvs.length > 0 && <SongsAlbums  isSquare={false}  onHandleClick={onHandleClick} albums={mvs} />}

        </Flex>


    )
}

export default memo(Mv)
